<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./common.css">
    <script src="https://cdn.jsdelivr.net/npm/gsap@latest"></script>
    <script src="./js/jq.js"></script>
</head>

<body>
    <div class="p24">
        <div class="top flex_x start ">
            <a href="./home.html"><img src="./static/image/left.png" alt=""></a>
            <span>Boarding Pass </span>
        </div>
        <div class="o_main flex_x between">
            <img src="./static/image/Group 5.svg" alt="">
            <div class="o_right flex_y start ml_10">
                <span class="font_16">Boarding Pass </span>
                <span class="font_12">Please fill up the confirmation number, departing and arriving to getyour boarding
                    pass.</span>
            </div>

        </div>
        <div class="i_title">Booking via</div>
        <div class="i_input flex_x between align_center"> <input type="text" placeholder="Booking via"> <img
                src="./static/image/down.svg" alt=""></div>
        <div class="i_title">Confirmation Number</div>
        <div class="i_input"> <input type="text" placeholder="Confirmation Number"></div>
        <div class="i_title">Departing</div>
        <div class="i_input flex_x between align_center"> <input type="text" placeholder="Departing"> <img
                src="./static/image/down.svg" alt=""></div>
        <div class="i_title">Arriving</div>
        <div class="i_input flex_x between align_center"> <input type="text" placeholder="Arriving"> <img
                src="./static/image/down.svg" alt=""></div>
        <div class="buttons txt_center">Continue</div>
    </div>
</body>
<script>
    gsap.from(".top img", {
        duration: .5,
        y: 60,
        x:10
    });
     
    gsap.from(".o_main img", {
        duration: .5,
        y: 100,
        x:40
    });
    gsap.from(".top span", {
        duration: .5,
        y: 60,
        x:10
    });
</script>
<style>
    .i_input img {
        width: 16px;
        height: 9px;
    }

    .buttons {
        width: 80vw;
        height: 51px;
        line-height: 51px;
        border-radius: 13px;
        background: rgba(255, 184, 105, 0.20);
        color: #FDA84A;
        font-size: 18px;
        font-weight: 500;
        position: fixed;
        bottom: 55px;
        left: 10vw;
    }

    .i_input {
        width: 100%;
        height: 54px;
        border-radius: 12px;
        background: #FFF;
        box-shadow: -34px 66px 21px 0px rgba(95, 93, 93, 0.00);
        margin: 0 auto;
        padding: 0 8px;
        box-sizing: border-box;
    }

    .i_input input {
        width: 100%;
        height: 100%;
        border: none;
        background: none;
        font-size: 15px;
        color: #C2C2C2;
    }

    .i_title {
        font-size: 15px;
        margin-bottom: 10px;
        margin-top: 25px;
        font-weight: 400;
    }

    .top img {
        width: 8px;
        height: 11px;
        margin-right: 115px;
    }

    .top {
        font-size: 15px;
        align-items: center;
    }

    .o_main {
        width: 100%;
        height: 96px;
        align-items: center;
        border-radius: 12px;
        background: #FDA84A;
        margin: 23px auto;
        padding: 0 4px;
        box-sizing: border-box;
    }

    .o_main img {
        width: 54px;
        height: 54px;
    }
</style>

</html>